<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Website Quản Lý Hoạt Động Đoàn</title>
<!-- Link online -->
<!-- <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/plug-ins/380cb78f450/integration/bootstrap/3/dataTables.bootstrap.css">
		<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
		<script type="text/javascript" language="javascript" src="//cdn.datatables.net/1.10.3/js/jquery.dataTables.min.js"></script>
		<script type="text/javascript" language="javascript" src="//cdn.datatables.net/plug-ins/380cb78f450/integration/bootstrap/3/dataTables.bootstrap.js"></script> -->
<!-- /Link online-->
<!-- Link local -->
<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css"
	href="css/dataTables.bootstrap.css">
<script type="text/javascript" language="javascript"
	src="js/bootstrap.min.js"></script>
<script type="text/javascript" language="javascript"
	src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" language="javascript"
	src="js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript"
	src="js/dataTables.bootstrap.js"></script>
<!-- /Link local -->
</head>
<script type="text/javascript">
	$(document).ready(function() {
		var table= $('#listHoatDong').dataTable();
		$('#themHoatDong').click(function() {
			location.href='themHoatDongDT.jsp';
		});
		$('.xemTTHD').click(function() {
			location.href='themHoatDongDT.jsp';
		});
		$('.suaTTHD').click(function() {
			location.href='themHoatDongDT.jsp';
		});
		$('.xoaTTHD').click(function() {
			alert("Bạn có muốn xóa thông tin của đoàn viên này không?");
		});
		$('#checkAlls').click(function(){
	        // Lấy giá trị checked
	        var checked = this.checked;
	 
	        // Gán giá trị đó vào các list checkbox
	        $('input[name="selected"]').prop('checked', checked);
	    });		
		
	} );
</script>
<body>
	<nav class="navbar navbar-default" role="navigation">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse"
				data-target="#bs-example-navbar-collapse-1">
				<span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span
					class="icon-bar"></span><span class="icon-bar"></span>
			</button>
			<a class="navbar-brand"  style="color: blue;">ĐOÀN TRƯỜNG</a>
		</div>

		<div class="collapse navbar-collapse"
			id="bs-example-navbar-collapse-1">
			<ul class="nav navbar-nav">
				<li><a href="#">TRANG CHỦ</a></li>
				<li class="dropdown"><a href="#" class="dropdown-toggle"
					data-toggle="dropdown">QUẢN LÝ VĂN BẢN<strong class="caret"></strong></a>
					<ul class="dropdown-menu">
						<li><a href=";#">VĂN BẢN CHỜ DUYỆT</a></li>
						<li><a href="#">.....</a></li>
					</ul></li>
				<li class="dropdown" ><a href="#" class="dropdown-toggle"
					data-toggle="dropdown">QUẢN LÝ HOẠT ĐỘNG<strong class="caret"></strong></a>
					<ul class="dropdown-menu">
						<li class="active"><a href=";#">Danh Sách Hoạt Động</a></li>
						<li><a href="#">Thêm Hoạt Động</a></li>
						<li><a href="#">Đánh giá hoạt động</a></li>
						<li class="divider"></li>
						<li><a href="#">Tổng kết</a></li>
					</ul></li>

				<li><a href="#">ĐỔI MẬT KHẨU</a></li>
			</ul>
			<ul class="nav navbar-nav navbar-right">
				<li class="dropdown"><a href="#" class="dropdown-toggle"
					data-toggle="dropdown">HÀNH ĐỘNG<strong class="caret"></strong></a>
					<ul class="dropdown-menu">
						<li><a href=";#">THOÁT</a></li>
						<li><a href="#">Another action</a></li>
						<li><a href="#">Something else here</a></li>
						<li class="divider"></li>
						<li><a href="#">Separated link</a></li>
					</ul></li>
			</ul>
		</div>
	</nav>
	<div class="container">
		<h2>DANH SÁCH HOẠT ĐỘNG</h2>
		<hr>		
		<div>			
			<br />
			<table>
				<tr>
					<th>Mã Hoạt Động</th>
					<th>Tên Hoạt Động</th>
					<th>Đơn Vi Tổ Chức</th>
					<th></th>
				</tr>
				<tr>
					<td><input class="form-control" type="text" name="maHD"
						id="maHD" class="textfield" /></td>
					<td><input class="form-control" type="text" name="tenHD"
						id="tenHD" class="textfield" /></td>
					<td><Select class="form-control" name="gioiTinh" id="gioiTinh">
							<option selected="selected">--Chọn ĐVTC--</option>
							<option value="1">Đoàn Trường</option>
							<option value="2">Đoàn Khoa</option>
							<option value="3">Chi Đoàn</option>
					</Select></td>
					
					<td><button class="btn btn-success btn-default">Tìm
							Kiếm</button></td>
				</tr>

			</table>
		</div>
		<br />
		<hr />
		<div>
			<button type="button" id="themHoatDong"
				class="btn btn-primary btn-default">Thêm Hoạt Động</button>
			<button type="button" id="xoaDoanVien"
				class="btn btn-danger btn-default">Xóa Mục Đã Chọn</button>
			<button type="button" id="inDSDoanVien"
				class="btn btn-primary btn-default">In Danh Sách</button>
		</div>
		<div style="float: right;">
			<input type="checkbox" id="includeinactive" checked="checked" />
			&nbsp; Bao Gồm HĐ Chưa Duyệt?
		</div>
		<br />
		<table id="listHoatDong" class="table table-striped table-bordered"
			cellspacing="0" width="100%">
			<thead>
				<tr>
					<th width="10px"><input id="checkAlls" type="checkbox" />All</th>
					<th width="70px">Mã HĐ</th>
					<th width="250px">Tên Hoạt Động</th>
					<th width="50px">SLĐK</th>					
					<th width="50px">ĐVTC</th>
					<th width="80px">TG KTĐK</th>
					<th width="80px">TG KTHĐ</th>
					<th width="80px">Trạng Thái</th>
					<th width="60px"></th>
				</tr>
			</thead>
			<tbody id="tbody">
				<tr>
					<td style="text-align: center;"><input class="checkBox"
						type="checkbox" name="selected" /></td>
					<td>HD2014-01</td>
					<td>Chủ Nhật Xanh</td>
					<td>50/50</td>
					<td>Đoàn Khoa</td>
					<td>20-11-2014</td>
					<td>23-11-2014</td>
					<td>Đã Duyệt</td>
					<td><input type="image" class="xemTTHD" src="img/detail.png" />
						&nbsp; <input type="image" class="suaTTHD" src="img/edit.png" />
						&nbsp; <input type="image" class="xoaTTHD" src="img/delete.jpg" />
					</td>
				</tr>
				<tr>
					<td style="text-align: center;"><input class="checkBox"
						type="checkbox" name="selected" /></td>
					<td>HD2014-02</td>
					<td>Hiến Máu Nhân Đạo Lần 222</td>
					<td>100/120</td>
					<td>Đoàn Khoa</td>
					<td>20-11-2014</td>
					<td>23-11-2014</td>
					<td>Đã Duyệt</td>
					<td><input type="image" class="xemTTHD" src="img/detail.png" />
						&nbsp; <input type="image" class="suaTTHD" src="img/edit.png" />
						&nbsp; <input type="image" class="xoaTTHD" src="img/delete.jpg" />
					</td>
				</tr>
				<tr>
					<td style="text-align: center;"><input class="checkBox"
						type="checkbox" name="selected" /></td>
					<td>HD2014-02</td>
					<td>Hiến Máu Nhân Đạo Lần 222</td>
					<td>100/100</td>
					<td>Chi Đoàn</td>
					<td>20-11-2014</td>
					<td>23-11-2014</td>
					<td>Đã Duyệt</td>
					<td><input type="image" class="xemTTHD" src="img/detail.png" />
						&nbsp; <input type="image" class="suaTTHD" src="img/edit.png" />
						&nbsp; <input type="image" class="xoaTTHD" src="img/delete.jpg" />
					</td>
				</tr>
				<tr>
					<td style="text-align: center;"><input class="checkBox"
						type="checkbox" name="selected" /></td>
					<td>HD2014-03</td>
					<td>Thứ 7 Tình Nguyện</td>
					<td>100/100</td>
					<td>Đoàn Khoa</td>
					<td>20-11-2014</td>
					<td>23-11-2014</td>
					<td>Chờ Duyệt</td>
					<td><input type="image" class="xemTTHD" src="img/detail.png" />
						&nbsp; <input type="image" class="suaTTHD" src="img/edit.png" />
						&nbsp; <input type="image" class="xoaTTHD" src="img/delete.jpg" />
					</td>
				</tr>
			</tbody>
		</table>
		<br />
		<hr>
		<div class="row">
			<div class="col-xs-12">
				<footer>
					<p>&copy;Tieu luan chuyen nganh M-B</p>

				</footer>
			</div>
		</div>
	</div>
</body>
</html>